ReactNative expo エイリアスpathの実現
概要
Expoでエイリアスpathを実現する方法
babel-plugin-module-resolverを利用する
達成イメージ
自分で作成したjsファイルをエイリアスを使ってimportしたい
code: sample.js
import { Sample } from '@elements/Sample';
...
実現方法フロー
1. babel-plugin-module-resolverをインストールする
$ yarn add -D babel-plugin-module-resolver
参考
2. babel.config.jsに以下のように追記/記載する
code: babel.config.js
module.exports = function (api) {
api.cache(true);
return {
plugins: [
[
'module-resolver',
{
alias: {
'@elements': './src/components/elements',
'@pages': './src/pages',
},
},
],
],
};
};
code: directory構成
...
src/
- components/
- elements/
- pages/
babel.config.js
...
参考
3. watchman watch-del-allを使って何かしらを綺麗にしてからexpo再起動
babel.config.jsを編集した後、何故かexpoがバグるのでその時にwatchmanを使う
以下のコードを実行して、再起動までの一連のコマンドを一気に実行する
code: command
watchman watch-del-all && rm -rf $TMPDIR/metro-* && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start
参考
4. 完了